<template>
  <div class="avatar-edit-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-icon name="arrow-left" class="back-button" @click="goBack" />
    </div>

    <!-- 当前头像显示 -->
    <div class="current-avatar-section">
      <div class="current-avatar-title">当前头像</div>
      <div class="current-avatar-wrapper">
        <img :src="currentAvatar" alt="当前头像" class="current-avatar" />
      </div>
      <div class="border"></div>
    </div>

    <!-- 星座头像选择 -->
    <div class="avatar-selection-section">
      <div class="avatar-grid">
        <div
          v-for="avatar in zodiacAvatars"
          :key="avatar.name"
          class="avatar-item"
          @click="selectAvatar(avatar)"
        >
          <img 
            :src="avatar.path" 
            :alt="avatar.name" 
            class="avatar-image"
            :class="{ 'selected': selectedAvatar === avatar.path }"
          />
          <div class="avatar-name">{{ avatar.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "../store/user";
import { showToast } from "vant";

const router = useRouter();
const userStore = useUserStore();

// 当前头像
const currentAvatar = ref("");

// 选中的头像
const selectedAvatar = ref("");

// 星座头像数据
const zodiacAvatars = ref([
  { name: "白羊座", path: "/src/assets/avatars/Aries.png", key: "Aries" },
  { name: "金牛座", path: "/src/assets/avatars/Taurus.png", key: "Taurus" },
  { name: "双子座", path: "/src/assets/avatars/Gemini.png", key: "Gemini" },
  { name: "巨蟹座", path: "/src/assets/avatars/Cancer.png", key: "Cancer" },
  { name: "狮子座", path: "/src/assets/avatars/Leo.png", key: "Leo" },
  { name: "处女座", path: "/src/assets/avatars/Virgo.png", key: "Virgo" },
  { name: "天秤座", path: "/src/assets/avatars/Libra.png", key: "Libra" },
  { name: "天蝎座", path: "/src/assets/avatars/Scorpio.png", key: "Scorpio" },
  {
    name: "射手座",
    path: "/src/assets/avatars/Sagittarius.png",
    key: "Sagittarius",
  },
  {
    name: "摩羯座",
    path: "/src/assets/avatars/Capricorn.png",
    key: "Capricorn",
  },
  { name: "水瓶座", path: "/src/assets/avatars/Aquarius.png", key: "Aquarius" },
  { name: "双鱼座", path: "/src/assets/avatars/Pisces.png", key: "Pisces" },
]);

// 返回上一页
const goBack = () => {
  router.back();
};

// 选择头像
const selectAvatar = async (avatar) => {
  try {
    // 更新选中的头像
    selectedAvatar.value = avatar.path;
    
    // 更新用户信息
    const userData = {
      avatar: avatar.path,
    };

    // 调用更新用户信息接口
    await userStore.updateUserInfo(userData);
    currentAvatar.value = userStore.userInfo?.avatar;
    // 显示成功提示
    showToast("头像更新成功");
  } catch (error) {
    console.error("头像更新失败:", error);
    showToast("头像更新失败，请重试");
  }
};

// 初始化
onMounted(() => {
  // 获取当前头像
  currentAvatar.value =
    userStore.userInfo?.avatar || "/src/assets/avatars/Aries.png";
  // 初始化选中的头像为当前头像
  selectedAvatar.value = currentAvatar.value;
});
</script>

<style scoped>
.avatar-edit-container {
  min-height: 100vh;
  background-color: #ffffff;
}

.header {
  padding: 20px 20px 0 20px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.back-button {
  font-size: 20px;
}

.current-avatar-section {
  background-color: #fff;
  padding: 43px 20px 0px 20px;
  text-align: center;
}

.current-avatar-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.current-avatar-wrapper {
  display: flex;
  justify-content: center;
}

.border {
  width: 100%;
  height: 1px;
  background-color: #f8f8f8;
  margin-top: 20px;
}

.current-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.avatar-selection-section {
  background-color: #fff;
  padding: 20px;
}

.selection-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
}

.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: -1px 0 0 -1px;
}

.avatar-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.avatar-image.selected {
  border: 3px solid #6c63ff;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

.avatar-name {
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .avatar-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .avatar-image {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 768px) {
  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .current-avatar {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1024px) {
  .avatar-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
</style>
